<script setup>
import {onMounted, onUnmounted, ref, provide} from 'vue'
import isMobile from "ismobilejs"
import {debounce} from '@/toolsjs/debounce'

const mobile = ref(false)

/**
 * 由于「App.vue」加载时，还没有加载「pinia」，所以不能使用「pinia」来保存数据，只能通过「依赖注入」
 * 子组件通过 const mobile = inject('mobile') 来使用数据
 * @type {Ref<UnwrapRef<boolean>>}
 */
provide('mobile', mobile)

/**
 * 处理resize事件
 */
const handleResize = () => {
  /**
   * 通过ismobilejs库判断是否为移动端
   * @type {isMobileResult}
   */
  const result = isMobile()
  // console.log(result.any ? 'Mobile端' : 'PC端', result)
  mobile.value = result.any
}

const handleResizeDeb = debounce(handleResize)

/**
 * 当网页加载完成时执行，只会执行一次，切换路由不会再次执行
 * 如果是 @/views 内的组件，切换路由会再次调用 onMounted()
 */
onMounted(() => {
  /**
   * 彻底禁止默认右键菜单
   * 子组件若想开启右键菜单，可以在标签内加上 @contextmenu.stop
   * 子组件若只想右键事件，可以在标签内加上 @contextmenu.stop.prevent="[handleEvent]"
   */
  window.addEventListener('contextmenu', e => {
    e.preventDefault()
  })

  handleResize()
  window.addEventListener('resize', handleResizeDeb)
})

/**
 * 当网页即将销毁时执行
 */
onUnmounted(() => {
  window.removeEventListener('resize', handleResizeDeb)
})
</script>

<template>
  <RouterView />
</template>